<template>
    <div>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
            <div class="item">11</div>
            <div class="item">12</div>
        </div>
        <div class="videoBox">
            <video ref="video" width="640" height="480" controls autoplay></video>
            <button @click="getCameraAccess" class="hq">获取</button>
        </div>
        <div>
            <video ref="videoElement" src="" controls width="640" height="480"></video>
            <button @click="getUrl">点击获取地址</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const video = ref(null);
const videoElement = ref(null);
const getCameraAccess = async () => {
    // http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
        console.log(stream, 'stream')
        // video.value.srcObject = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8';
        video.value.srcObject = stream;
    } catch (error) {
        console.error('Error accessing camera:', error);
    }
}

/**
 * let a = 'wihqowihre11';
let blob = new Blob([a]); // 将字符串 a 转换为 Blob 对象
 * 
 * text/plain：纯文本类型，表示普通的文本数据。
text/html：HTML 文档类型，用于表示 HTML 内容。
application/json：JSON 数据类型，用于表示 JSON 格式的数据。
image/jpeg、image/png、image/gif：图片类型，用于表示 JPEG、PNG、GIF 格式的图片数据。
audio/mpeg、audio/ogg：音频类型，用于表示 MP3、Ogg 格式的音频数据。
video/mp4、video/webm：视频类型，用于表示 MP4、WebM 格式的视频数据。
application/pdf：PDF 文档类型，用于表示 PDF 格式的文档数据。
application/octet-stream：通用的二进制数据流类型。
 * 
 */
const getUrl = () => {
    let videoUrl = 'https://img-baofun.zhhainiao.com/market/semvideo/vb2-1.mp4'; // 视频的地址
    fetch(videoUrl)
        .then(response => response.blob())
        .then(blob => {
            let blobUrl = URL.createObjectURL(blob);
            console.log(blobUrl, 'blobUrl')
            videoElement.value.src = blobUrl;
        })
        .catch(error => {
            console.error('Error fetching video:', error);
        });
}
</script>

<style lang="scss" scoped>
.box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    background-color: #aaa;
    margin: 100px auto;


    @for $i from 1 through 12 {
        &:hover .item:nth-child(#{$i}) {
            transform: scale(1) rotate(#{$i  * 30deg});
        }
    }

    .item {
        width: 50px;
        height: 50px;
        background-color: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 200px;
        color: aqua;
        transition-duration: 1s;
        transform-origin: 150px 150px;
        transform: scale(0);
        transition: 1s;
    }


}

.videoBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hq {
    width: 80px;
    height: 50px;
}
</style>